<template>
	<view class="turnover_box">
		<view class="turnover_record_tlt">
			<view class="turnover_record_tlt_left">
				<text class="bg_red my-mgr-8"></text>
				<text class="bg_txt">{{currTab}}</text>
			</view>
			<view class="turnover_record_tlt_right">
				<view class="turnover_btn">
					<text class="my-mgr-5" @click="changeDays('MONTH')"  v-show="currchange==='DAY'">按日</text>
					<text class="my-mgr-5" @click="changeDays('DAY')" v-show="currchange==='MONTH'">按月</text>
					<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/BfiSkmeEcU_change_icon.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
				</view>
			</view>
		</view>
		<view class="rute_first_box">
			<!-- 1 -->
			<view class="rute_first_box_item" @click="goTrans">
				<view class="top_num">
					<image :src="newimgfir" mode="" style="width: 82rpx;height: 82rpx;"></image>
				</view>
				<view class="txt_center">
					<view class="turn_tlt">
						{{currchange==='DAY'?'今日':'当月'}}团队{{currTab==='交易额'?'交易量(元)':''||currTab==='交易笔数'?'交易笔数(笔)':''||currTab==='机具激活'?'机具激活(个)':''}}
					</view>
					<view class="turn_content my-mgt-4" v-if="currTab==='交易额'">
						{{perDataDev[0].teamAmount|| 0}}
					</view>
					<view class="turn_content my-mgt-4" v-else-if="currTab==='交易笔数'">
						{{perDataDev[0].teamCount || 0}}
					</view>
					<view class="turn_content my-mgt-4" v-else>
						{{perDataDev[0].teamCount || 0}}
					</view>
				</view>
				<view class="arraw_right">
					<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/wQnZZqNAjB_rightarrow_icon.png" mode="" style="width: 30rpx;height: 30rpx;">
					</image>
				</view>
			</view>
			<!-- 2 -->
			<view class="rute_first_box_item" @click="goTrans">
				<view class="top_num">
					<image :src="newimgtwo" mode="" style="width: 82rpx;height: 82rpx;"></image>
				</view>
				<view class="txt_center">
					<view class="turn_tlt">
						{{currchange==='DAY'?'今日':'当月'}}我的{{currTab==='交易额'?'交易量(元)':''||currTab==='交易笔数'?'交易笔数(笔)':''||currTab==='机具激活'?'机具激活(个)':''}}
					</view>
					<view class="turn_content my-mgt-4" v-if="currTab==='交易额'">
						{{perDataDev[0].myAmount|| 0 }}
					</view>
					<view class="turn_content my-mgt-4" v-else-if="currTab==='交易笔数'">
						{{perDataDev[0].myCount|| 0}}
					</view>
					<view class="turn_content my-mgt-4" v-else>
						{{perDataDev[0].myCount || 0}}
					</view>
				</view>
				<view class="arraw_right">
					<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/wQnZZqNAjB_rightarrow_icon.png" mode="" style="width: 30rpx;height: 30rpx;">
					</image>
				</view>
			</view>
			<!-- 3 -->
			<view class="rute_first_box_item" @click="goTrans" v-if="currTab !=='机具激活'">
				<view class="top_num">
					<image :src="newimgthree" mode="" style="width: 82rpx;height: 82rpx;"></image>
				</view>
				<view class="txt_center nobor">
					<view class="turn_tlt">
						{{currchange==='DAY'?'今日':'当月'}}直营{{currTab==='交易额'?'交易量(元)':''||currTab==='交易笔数'?'交易笔数(笔)':''||currTab==='机具激活'?'机具激活(个)':''}}
					</view>
					<view class="turn_content my-mgt-4" v-if="currTab==='交易额'">
						{{perDataDev[0].nextAmount|| 0}}
					</view>
					<view class="turn_content my-mgt-4" v-else-if="currTab==='交易笔数'">
						{{perDataDev[0].nextCount || 0}}
					</view>
				</view>
				<view class="arraw_right nobor">
					<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/wQnZZqNAjB_rightarrow_icon.png" mode="" style="width: 30rpx;height: 30rpx;">
					</image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"turnover",
		props:{
			currTab:String,
			newimgfir:String,
			newimgtwo:String,
			newimgthree:String,
			companyName:String,//左边tab
			currSwitch:Number,//公司id
			perDataDev:Array,
		},
		data() {
			return {
				currchange: 'DAY',
			};
		},
		created() {
			this.getData()
		},
		methods:{
			goTrans(){
				let currTab= this.currTab
				let companyName= this.companyName
				let id = this.currSwitch
				uni.redirectTo({
					url:`/pages/performance/transactionDetails?currTab=${currTab}&companyName=${companyName}&ids=${id}`
				})
			},
			// 日月切换
			changeDays(name) {
				this.currchange = name
				this.$emit("getSonData",this.currchange)
			},
			async getData(){
				this.$emit("getSonData",this.currchange)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.turnover_box {
		width: 520rpx;
		height: 470rpx;
		margin: auto;
		.turnover_record_tlt {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
		
			.turnover_record_tlt_left {
				width: 50%;
				height: 100%;
				display: flex;
				align-items: center;
		
				.bg_red {
					display: block;
					width: 6rpx;
					height: 30rpx;
					background: #F05329;
				}
		
				.bg_txt {
					display: block;
					width: 150rpx;
					height: 100%;
					font-size: 30rpx;
					font-weight: bold;
					color: #000000;
					line-height: 100rpx;
				}
			}
		
			.turnover_record_tlt_right {
				width: 50%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				.turnover_btn{
					width: 150rpx;
					height: 60rpx;
					background: #F6F6F6;
					border: 1rpx solid #A7A7A7;
					border-radius: 30rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					font-weight: 500;
				}
			}
		}
		.rute_first_box{
			width: 100%;
			height: 370rpx;
			.rute_first_box_item{
				width: 100%;
				height: 33.3%;
				display: flex;
				align-items: center;
				.top_num,.arraw_right{
					height: 100%;
					display: flex;
					align-items: center;
				}
				.top_num{
					width: 20%;
				}
				.txt_center{
					width: 70%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					border-bottom: 1rpx solid #f1f1f1;
					.turn_tlt{
						font-size: 26rpx;
						font-weight: 500;
						color: #666666;
					}
					.turn_content{
						font-size: 36rpx;
						font-weight: bold;
						color: #000000;
					}
				}
				.arraw_right{
					width: 10%;
					border-bottom: 1rpx solid #f1f1f1;
				}
				.nobor{
					border-bottom: none;
				}
			}
		}
	}
	
</style>
